import React from 'react'
import SwipeableViews from 'react-swipeable-views';
import {autoPlay} from 'react-swipeable-views-utils'
import './Swiper.less'
import Pagination from './Pagination/Pagination'

const AutoPlaySwipeableViews = autoPlay(SwipeableViews);
export default class Swiper extends React.Component {
      constructor(props){
          super(props)
          this.state={
              currentIndex:0
          }
      }
      handleChangeIndex=(index)=>{
          console.log(index)
          this.setState({
              currentIndex:index
          })
      }

    render() {
        console.log(this.props)
        let banners = this.props.banners;


        return (
            // style={{ position: 'relative'}}

            <div className='swiper' >

                <AutoPlaySwipeableViews enableMouseEvents  index={this.state.currentIndex}  onChangeIndex={this.handleChangeIndex}>
                    {banners.map((item, index) => {
                        return (
                            <div className='swiper-view' key={item + index} style={{

                            }}>


                                <img src={item} alt="" />
                            </div>
                        )
                    })}


                </AutoPlaySwipeableViews>
                <Pagination   myindex={this.state.currentIndex}  
                
                dots={banners.length}
                />
            </div>

        )
    }
}